export const codeText0 =  `
<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<template>
  <h2 class="title">{{ msg }}</h2>
  <button type="button" @click="increment">count is {{ count }}</button>
</template>

<style scoped>
.title {
  color: red;
}
</style>
`

export const codeText1 = `
<script>
import { ref } from 'vue'

export default {
  props: {
    msg: String
  },
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return { count, increment }
  }
}

</script>

<template>
  <h2 class="title">{{ msg }}</h2>
  <button type="button" @click="increment">count is {{ count }}</button>
</template>

<style scoped>
.title {
  color: red;
}
</style>
`

export const codeText2 = `
<script>
export default {
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
      codeText1
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

</script>

<template>
  <h2 class="title">{{ msg }}</h2>
  <button type="button" @click="increment">count is {{ count }}</button>
</template>

<style scoped>
.title {
  color: red;
}
</style>
`

export const codeTextHfn = `
<script>
import { h, ref } from 'vue'

export default {
  components: {
    CodeShow
  },
  props: {
    msg: String
  },
  setup(props) {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    
    // 返回渲染函数
    return () => h('div', [
      h('h2', {class: 'title'}, props.msg),
      h('button', {
        type: 'button',
        onClick: increment
      }, \`count is: \${count.value}\`)
    ])
  }
}
</script>
<style scoped>
.title {
  color: red;
}
</style>
`

export const codeTextSetupSugerHfn = `
<script setup>
import { ref, h } from 'vue'

const props = defineProps({
  msg: String
})

const count = ref(0)
const increment = () => count.value++

// 直接定义 render 函数
const render = () => h('div', [
  h('h2', { class: 'title' }, props.msg),
  h('button', { type: 'button', onClick: increment }, \`count is \${count.value}\`),
])
</script>

<template>
  <render />
</template>

<style scoped>
.title {
  color: red;
}
</style>
`


export const codeTexMix = `
<script>
import { ref } from 'vue'

export default {
  props: {
    msg: String
  },
  data() {
    return {
      codeText1
    }
  },
  setup() {
    const count = ref(0)
    return { count }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

</script>

<template>
  <h2>{{ msg }}</h2>
  <button type="button" @click="increment">count is {{ count }}</button>
  <code-show :code-text="codeText1" />
</template>

<style scoped>
</style>
`

export const codeTextJsx = `
import { defineComponent, ref } from 'vue'
import './jsxcss.css'

export default defineComponent({
  props: {
    msg: String
  },
  setup(props) {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return () => (
      <div>
        <h2 class="title">{props.msg}</h2>
        <button type="button" onClick={increment}>count is {count.value}</button>
      </div>
    )
  }
})
`

export const codeTextJsxNoDfc = `
import { ref } from 'vue'
import './jsxcss.css'

export default {
  props: {
    msg: String
  },
  setup(props) {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return () => (
      <div>
        <h2 class="title">{props.msg}</h2>
        <button type="button" onClick={increment}>count is {count.value}</button>
      </div>
    )
  }
}
`

export const codeTextJsxOption = `
import { defineComponent } from 'vue'
import CodeShow from './CodeShow.vue'
import { codeTextJsxNoDfc } from './codetext'
import './jsxcss.css'

export default defineComponent({
  name: 'MyComponent',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  render() {
    return (
      <div>
        <h2 class="title">{this.msg}</h2>
        <button onClick={this.increment}>count is {this.count}</button>
        <CodeShow code-text={codeTextJsxNoDfc} />
      </div>
    )
  }
})
`

export const codeTextFn = `
import { h } from 'vue'
import CodeShow from './CodeShow.vue'
import { codeTextFn } from './codetext'
import './jsxcss.css'

const HelloWorldFn = (props, { emit }) => {
  // 移除响应式状态，改为从 props 接收
  const { msg, count = 0 } = props
  
  // 事件处理函数
  const handleIncrement = () => {
    emit('increment')
  }

  return h('div', [
    h('h2', { class: 'title' }, msg),
    h('button', {
      type: 'button',
      onClick: handleIncrement
    }, \`count is \${count}\`),
    h(CodeShow, { codeText: codeTextFn })
  ])
}

// 定义组件属性
HelloWorldFn.props = {
  msg: String,
  count: {
    type: Number,
    default: 0
  }
}

// 定义组件发出的事件
HelloWorldFn.emits = ['increment']

export default HelloWorldFn
`

export const codeTextFnJsx = `
import CodeShow from './CodeShow.vue'
import { codeTextFnJsx } from './codetext'
import './jsxcss.css'

const HelloWorldFnJsx = (props, { emit }) => {
  // 移除响应式状态，改为从 props 接收
  const { msg, count = 0 } = props
  
  // 事件处理函数
  const handleIncrement = () => {
    emit('increment')
  }

  return (
    <>
      <h1 class="title">{msg}</h1>
      <button type="button" onClick={handleIncrement}>count is {count}</button>
      <CodeShow codeText={codeTextFnJsx} />
    </>
  )
}

// 定义组件属性
HelloWorldFnJsx.props = {
  msg: String,
  count: {
    type: Number,
    default: 0
  }
}

// 定义组件发出的事件
HelloWorldFnJsx.emits = ['increment']

export default HelloWorldFnJsx
`